<template>
  <div>
    <group>
      <datetime format="YYYY-MM" title="分数月度" v-model="time" value-text-align="center"></datetime>
      <x-button type="primary" @click.native="getHistoryList()">查询</x-button>
    </group>
    <group>
      <div>
      <x-table :cell-bordered="false" :content-bordered="false" style="background-color:#fff;">
        <thead>
          <tr style="background-color: #F7F7F7">
            <th>时间</th>
            <th>申请积分</th>
            <th>积分类别</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody v-for="(data,index) in historyList">
          <tr>
            <td><span>{{data.year}}</span><span>-</span><span>{{data.month>9?data.month:0+data.month}}</span></td>
            <td style="padding:2px 15px 2px 2px;text-align:right">{{data.selfScore}}</td>
            <td>{{data.category}}</td>
            <td><router-link :to="'/tabbar/apply-detail?scoreId='+data.scoreId"><div :class='"status"+data.statusId'>{{data.status}}</div></router-link></td>
          </tr>
        </tbody>
      </x-table>
      </div>
    </group>
  </div>
</template>

<script>
import { XTable, Cell, Group, Badge, Divider ,Datetime, XButton} from 'vux'

export default {
  components: {
    XTable,
    Cell,
    Group,
    Badge,
    Divider,
    Datetime,
    XButton
  },
  data () {
    var ms_staffId = localStorage.getItem('ms_staffId')

    var currentDate = new Date()
    var currentTimeStr = currentDate.getFullYear() + '-' + (currentDate.getMonth() + 1)

    //时间格式
    var tempDateStr = ''
    var tempDates = new Array()
    tempDates = currentTimeStr.split('-')
    var tempMonth = ''
    tempMonth = tempDates[1]
    if (tempMonth >= 1 && tempMonth <= 9) {
      tempMonth = "0" + tempMonth 
    }
    tempDateStr = tempDates[0] + '-' + tempMonth

    return {
      historyList: [],
      staffIdOnLogin: ms_staffId,
      time: tempDateStr,
      year: currentDate.getFullYear(),
      month: currentDate.getMonth() + 1
    }
  },
  mounted: function () {
    this.getHistoryList()
  },
  methods: {
    getHistoryList: function () {
      var self = this
      var tempTime = []
      tempTime = self.time.split('-')
      self.month = tempTime[1]
      self.year = tempTime[0]
      self.$ajax({
        method: 'get',
        url: '../wx/userAdditional/apply/history',
        params: {
          staffId: self.staffIdOnLogin,
          month: self.month,
          year: self.year,
        }
      })
      .then(function (res) {
        self.historyList = res.data
      })
      .catch(function (err) {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>
.my-img {
float:left;
  max-width: 30%;
}
.center {
  margin-top: 15px;
  text-align: center;
}
.vux-notice {
  color: #666;
  line-height: 40px;
}
.demo-icon {
  margin-right: 15px;
}
.vux-title {
  vertical-align: middle;
  text-align: center;
  color: #04BE02;
  display: inline-block;
  width: 75px;
  height: 75px;
  line-height: 75px;
  border-radius: 50%;
}
body {
  font-family: Helvetica, sans-serif;
  background-color: #fbf9fe;
}
.demo-tip {
  background-color: #fefcec;
  color: #f76a24;
  font-size: 12px;
  padding: 5px 10px;
  margin-top: 15px;
}
.status1{
  color: blue;
}
</style>
